<template>
  <div>
    <header class="app-header">设置</header>
    <div class="sz-wrapper">
      <!--  -->
      <div v-if="isLogin" class="header-loggedin">
        <div class="user-info">
          <div class="user-avatar">
            <img :src="userImg" alt="" />
            <h3>{{ user.name }}</h3>
            <a @click="doLogout" class="logout-btn" href="javascript:;">退出</a>
          </div>
          <div class="user-page">个人主页&gt;</div>
        </div>
        <div class="user-data">
          <ul>
            <li>
              <div class="data">179</div>
              <div class="type">头条</div>
            </li>
            <li>
              <div class="data">249</div>
              <div class="type">获赞</div>
            </li>
            <li>
              <div class="data">740</div>
              <div class="type">粉丝</div>
            </li>
            <li>
              <div class="data">17</div>
              <div class="type">关注</div>
            </li>
          </ul>
        </div>
      </div>
      <div v-else class="header-login">
        <div @click="$router.push('/login')" class="login-btn">登录</div>
      </div>
      <!--  -->
      <div class="card">
        <ul class="actions">
          <li>
            <i class="iconfont iconnotification"></i>
            <div>消息通知</div>
          </li>
          <li>
            <i class="iconfont iconshoucang"></i>
            <div>收藏</div>
          </li>
          <li>
            <i class="iconfont icontime"></i>
            <div>浏览历史</div>
          </li>
          <li>
            <i class="iconfont icondownload"></i>
            <div>下载管理</div>
          </li>
        </ul>
      </div>
      <!--  -->
      <div class="card">
        <div>记录新鲜事</div>
      </div>
    </div>
  </div>
</template>

<script>
import userImg from "../../assets/bus.jpg";
import { getUser, removeUser } from "../../util/session";
import { mapState } from "vuex";
export default {
  data() {
    return {
      userImg,
    };
  },
  methods: {
    doLogout() {
      removeUser();
      this.$store.commit("login/SET_USER", null);
      // TODO
      this.$router.go(0);
    },
  },
  computed: {
    ...mapState("login", ["user"]),
    isLogin() {
      const user = getUser();
      return !!user;
    },
  },
};
</script>

<style scoped>
.sz-wrapper {
  padding: 10px;
}

.login-btn {
  width: 100px;
  height: 100px;
  background-color: #990000;
  margin: 10px auto 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 20px;
}

.logout-btn {
  color: #999;
  font-size: 15px;
  margin-left: 10px;
}

.card {
  background-color: #fff;
  padding: 20px 0;
  border-radius: 5px;
  margin-bottom: 10px;
}

.actions {
  display: flex;
  font-size: 14px;
  color: #333;
}

.actions li {
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.actions li i {
  font-size: 30px;
  color: #990000;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-avatar {
  display: flex;
  align-items: center;
}

.user-avatar img {
  width: 50px;
  border-radius: 50%;
  margin-right: 20px;
}

.user-page {
  color: #999;
  font-size: 14px;
}

.user-data {
  margin: 20px 0;
  font-size: 18px;
}

.user-data ul {
  display: flex;
}

.user-data ul li {
  flex-grow: 1;
  text-align: center;
}

.user-data .data {
  font-weight: bold;
}

.user-data .type {
  color: #999;
  font-size: 14px;
}
</style>